import React, { useState } from 'react';

import { Button, Card, Divider, Form, Space } from 'antd';

import type { UploadFile } from 'antd';

const UploadExample: React.FC = () => {
  const [form] = Form.useForm();
  const [businessLicense, setBusinessLicense] = useState<UploadFile[]>([]);
  const [socialCreditCode, setSocialCreditCode] = useState<UploadFile[]>([]);

  const handleSubmit = async (values: any) => {
    console.log('表单数据:', {
      ...values,
      businessLicense,
      socialCreditCode,
    });
  };

  return (
    <div style={{ padding: '24px', maxWidth: '800px', margin: '0 auto' }}>
      <Card title="机构证件上传">
        <Form form={form} layout="vertical" onFinish={handleSubmit}>
          {/* 营业执照上传 */}
          <Form.Item label="营业执照" required extra="请上传营业执照的清晰照片或扫描件">
            <CustomUpload
              value={businessLicense}
              onChange={setBusinessLicense}
              acceptTypes={['image/jpeg', 'image/png', 'application/pdf']}
              maxCount={1}
              maxSize={10}
              listType="picture-card"
              uploadText="上传营业执照"
              placeholder="支持JPG、PNG、PDF格式，文件大小不超过10MB"
              action="/api/upload/business-license"
            />
          </Form.Item>

          <Divider />

          {/* 统一社会信用代码证上传 */}
          <Form.Item
            label="统一社会信用代码证"
            extra="如果营业执照已包含统一社会信用代码，可不上传此项"
          >
            <CustomUpload
              value={socialCreditCode}
              onChange={setSocialCreditCode}
              acceptTypes={['image/jpeg', 'image/png', 'application/pdf']}
              maxCount={2}
              maxSize={5}
              listType="picture-card"
              uploadText="上传证件"
              placeholder="支持JPG、PNG、PDF格式，最多2个文件，单个文件不超过5MB"
              action="/api/upload/social-credit"
            />
          </Form.Item>

          <Divider />

          {/* 其他示例：列表形式上传 */}
          <Form.Item label="其他证明文件" extra="可上传其他相关证明文件">
            <CustomUpload
              value={[]}
              onChange={files => console.log('其他文件:', files)}
              acceptTypes={['image/jpeg', 'image/png', 'application/pdf', 'application/msword']}
              maxCount={5}
              maxSize={20}
              listType="text"
              uploadText="选择文件"
              placeholder="支持图片、PDF、Word文档，最多5个文件"
              action="/api/upload/others"
            />
          </Form.Item>

          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
              <Button onClick={() => form.resetFields()}>重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>

      {/* 展示不同配置的示例 */}
      <Card title="不同配置示例" style={{ marginTop: '24px' }}>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          {/* 只支持图片的上传 */}
          <div>
            <h4>只支持图片上传</h4>
            <CustomUpload
              acceptTypes={['image/jpeg', 'image/png']}
              maxCount={3}
              listType="picture-card"
              uploadText="上传图片"
              placeholder="只支持JPG、PNG格式"
            />
          </div>

          {/* 圆形头像上传 */}
          <div>
            <h4>头像上传</h4>
            <CustomUpload
              acceptTypes={['image/jpeg', 'image/png']}
              maxCount={1}
              listType="picture-circle"
              uploadText="上传头像"
              placeholder="建议上传1:1比例的图片"
            />
          </div>

          {/* 文档上传 */}
          <div>
            <h4>文档上传</h4>
            <CustomUpload
              acceptTypes={[
                'application/pdf',
                'application/msword',
                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
              ]}
              maxCount={5}
              listType="text"
              uploadText="选择文档"
              placeholder="支持PDF、Word文档"
            />
          </div>

          {/* 禁用状态 */}
          <div>
            <h4>禁用状态</h4>
            <CustomUpload disabled uploadText="已禁用" placeholder="当前不可上传" />
          </div>
        </Space>
      </Card>
    </div>
  );
};

export default UploadExample;
